<template>
	<view class="container login-warp">
		<view class="login-title">请输入平台登记的手机号</view>
		<uni-forms ref="form" :model="formData">
			<uni-forms-item name="phone">
				<view class="form-item">
					<uni-data-select class="dataSelect" v-model="formData.quhao" :clear="false" :localdata="range"></uni-data-select>
					<input type="tel" class="input" v-model="formData.phone" @blur="savePhone" maxlength="11" placeholder="请输入手机号" />
				</view>
			</uni-forms-item>
			<uni-forms-item name="code">
				<view class="form-item">
					<input class="input" v-model="formData.code" placeholder="请输入验证码" placeholder-class="input-placeholder" />
					<view v-show="showBtn" class="code" @click="getCode">获取验证码</view>
					<view class="flex yan" v-show="!showBtn" @click="resend">
						<text>重新发送</text>
						<view class="flex yan">
							<text>(</text>
							<uni-countdown
								ref="countdown"
								:start="!showBtn"
								class="code"
								:second="second"
								:showDay="false"
								:showHour="false"
								:showMinute="false"
								@timeup="timeup"
							></uni-countdown>
							<text>)</text>
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="select">
				<view class="form-item noBoder">
					<radio-group class="radio-group" @change="selectHandle">
						<label class="label">
							<radio class="radio" color="#ff5668" :value="formData.select" :checked="formData.select" />
							我已阅读并同意签署
						</label>
					</radio-group>
					<view class="xieyi">
						<text class="text" @click="gotoPage(1)">用户协议</text>
						和
						<text class="text" @click="gotoPage(2)">隐私政策</text>
					</view>
				</view>
			</uni-forms-item>
			<button class="submit" @click="submit">立即登录</button>
		</uni-forms>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { formPost } from '@/request/index.js';
import FormData from '@/request/formData.js';
import { onLoad } from '@dcloudio/uni-app';

const form = ref();
//手机号前面的区号
const range = reactive([
	{
		value: '+86',
		text: '+86'
	}
]);
// 登录的表单数据
const formData = reactive({
	quhao: '+86',
	phone: '',
	code: '',
	select: false
});

onLoad(() => {
	// 获取用户登录后的token
	const str = uni.getStorageSync('userinfo') || '';
	const userInfo = str.length ? JSON.parse(str) : {};
	const token = userInfo?.access_token;
	if (token?.length) {
		uni.switchTab({
			url: '/pages/promotionCenter/promotionCenter'
		});
	}
	const phone = uni.getStorageSync('phone') || '';
	formData.phone = phone;
});

//保存手机号码
const savePhone = () => {
	if (!formData.phone.length) {
		return uni.showToast({
			title: '请输入手机号码',
			icon: 'error'
		});
	} else {
		if (!/^1[3456789]\d{9}$/.test(formData.phone)) {
			return uni.showToast({ title: '请输入正确的手机号码！', icon: 'error' });
		}
	}
	uni.setStorageSync('phone', formData.phone);
};

let showBtn = ref(true);
// 获取验证码
let second = ref(60);
const countdown = ref();
const getCode = async () => {
	if (!formData.phone.length) {
		return uni.showToast({
			title: '请输入手机号码',
			icon: 'error'
		});
	} else {
		if (!/^1[3456789]\d{9}$/.test(formData.phone)) {
			return uni.showToast({ title: '请输入正确的手机号码！', icon: 'error' });
		}
	}
	let formDatas = new FormData();
	formDatas.append('phone', formData.phone);
	const params = formDatas.getData();
	uni.showLoading({ title: '正在获取验证码' });
	const res = await formPost('mm/telcode', params);
	if (res.code == 200) {
		uni.hideLoading();
		uni.showToast({ title: '验证码已发送' });
		showBtn.value = false;
	}
};

//重新发送验证码
const resend = async () => {
	const { seconds } = countdown.value;
	if (seconds == '00') {
		getCode();
		second.value = 60;
	} else {
		uni.showToast({
			title: `${seconds}秒后再获取`,
			icon: 'none'
		});
	}
};

// 倒计时结束
const timeup = () => {
	showBtn.value = true;
};

//勾选同意用户协议和隐私政策
const selectHandle = () => {
	formData.select = !formData.select;
};
// 跳转用户协议和隐私政策
const gotoPage = (n) => {
	uni.navigateTo({
		url: `/pages/index/index?type=${n}`
	});
};
//提交数据登录
const submit = async () => {
	if (!formData.phone.length) {
		return uni.showToast({
			title: '请输入手机号码',
			icon: 'error'
		});
	} else {
		if (!/^1[34578]\d{9}$/.test(formData.phone)) {
			return uni.showToast({ title: '请输入正确的手机号码！', icon: 'error' });
		}
	}
	if (!formData.code.length) {
		return uni.showToast({
			title: '请输入手机验证码',
			icon: 'error'
		});
	}
	if (!formData.select) {
		return uni.showToast({
			title: '请勾选我已阅读并同意签署用户协议和隐私政策',
			icon: 'none'
		});
	}
	let formDatas = new FormData();
	formDatas.append('phone', formData.phone);
	formDatas.append('code', formData.code);
	const params = formDatas.getData();
	uni.showLoading({
		title: '登录中···'
	});
	const res = await formPost('agent/login', params);
	if (res.code == 200) {
		uni.setStorageSync('userinfo', JSON.stringify(res.data));
		uni.hideLoading();
		uni.showToast({
			title: res.message,
			icon: 'success'
		});
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/promotionCenter/promotionCenter'
			});
		}, 1500);
	}
};
</script>
